<template>
<div class="cc">
    <input v-model="Surname" placeholder="姓" />
    <input v-model="Name" placeholder="名" />
    <p>{{ FullName }}</p>
</div>
</template>

<script setup>
import {ref, computed} from 'vue'

const Surname = ref('')
const Name = ref('')

const FullName = computed(
    () => {
        return Surname.value + Name.value
    }
)

</script>

<style scoped>
.cc{
    background-color: rgb(233, 197, 197);
    border-radius:15px;
    padding:20px;
}
</style>